<template>
    <el-row style="height: 36px; padding:3px 2px; ">
        <el-col :span="24">
            <el-container>
                <el-main style="width:1px;">
                    <vxe-select v-model="field" size="mini" style="width:100%;" @change="getType" transfer>
                        <vxe-option v-for="(item,index) in fieldList" :key="index" :label="item.fieldName"
                            :value="item.fieldCode" :type="item.fieldType">
                        </vxe-option>
                    </vxe-select>
                </el-main>
                <el-aside width="116px" style="padding:0px 8px;line-height: 28px; background: #fff;">
                    <vxe-select v-model="operator" size="mini" transfer style="width:100%;">
                        <vxe-option v-for="(item,index) in operatorList" :key="index" :label="item.name"
                            :value="item.key">
                        </vxe-option>
                    </vxe-select>
                </el-aside>
                <el-main style="width:1px;">
                    <el-input :disabled="inputDis" v-model="value" v-if="inputShow" size="mini" placeholder="请输入内容"
                        style="width:100%;" transfer>
                    </el-input>
                    <vxe-input :disabled="inputDis" v-model="value" v-if="dateShow" placeholder="日期选择" size="mini"
                        type="date" style="width:100%;" transfer> </vxe-input>
                    <vxe-input :disabled="inputDis" v-model="value" v-if="dateTimeShow" placeholder="日期和时间选择"
                        style="width:100%;" size="mini" type="datetime" transfer></vxe-input>
                </el-main>
            </el-container>
        </el-col>
    </el-row>
</template>

<script>
    import request from "@/utils/requestutil";

    export default {
        props: ['configData', "reset"],
        data() {
            return {
                inputDis: false,
                operatorList: [],//第一组连接条件符的值 { name: "等于", value: "=" }, { name: "不等于", value: "!=" }, { name: "包含*", value: "like" }, { name: "不包含*", value: "not like" }, { name: "以*开头", value: "*like" }, { name: "不以*开头", value: "not*like" }, { name: "以*结尾", value: "like*" }, { name: "不以*结尾", value: "notlike*" }, { name: "为空", value: "isnull" }, { name: "不为空", value: "isnotnull" }, { name: "空白", value: "blank" }, { name: "非空白", value: "nonblank" }, { name: "大于", value: ">" }, { name: "小于", value: "<" }, { name: "函数参数", value: "function" }
                fieldList: [],//指标下拉框的所有值
                field: "",//指标选中的值
                operator: "",//运算符选中的值

                value: "",//用户选择的值
                inputShow: false,//控制普通输入框的隐藏显示变量
                dateShow: false,//控制日期框的隐藏显示变量
                dateTimeShow: false,//控制日期时间框的隐藏显示变量
            }
        }, watch: {
            //重置监听
            reset: {
                handler() {
                    this.field = "";
                    this.operator = "like";
                    this.value = "";
                },
                deep: true,
                immediate: true
            },
            //监听指标下拉框的值变化
            field: {
                handler(newVal, oldVal) {
                    this.setOutData(newVal, this.operator, this.value)
                },
                deep: true,
                immediate: true
            },
            //监听运算符下拉框的值变化
            operator: {
                handler(newVal, oldVal) {
                    if ("is null" == newVal || "is not null" == newVal) {
                        this.value = "";
                        this.inputDis = true;
                    } else {
                        this.inputDis = false;
                    }
                    this.setOutData(this.field, newVal, this.value);

                },
                deep: true,
                immediate: true
            },
            //监听用户选择的值变化
            value: {
                handler(newVal, oldVal) {
                    this.setOutData(this.field, this.operator, newVal)
                },
                deep: true,
                immediate: true
            }
        }, created() {
            this.getData();
            request({
                method: "post",
                url: "mlcxyxfData",
            }).then((data) => {
                this.operatorList = data.data;
            });
            this.operator = "like";
        },
        methods: {
            setOutData(field, operator, value) {
                if (field == "") {
                    this.$emit("change", "");
                    return;
                }
                if ("is null" != operator && "is not null" != operator && value == "") {
                    this.$emit("change", "");
                    return;
                }
                this.$emit("change", {
                    "property": field,
                    "operator": operator,
                    "value": value,
                });
                return;
            },
            getType(val) {
                for (var i = 0; i < this.fieldList.length; i++) {
                    if (val.value === this.fieldList[i].fieldCode) {
                        if ("String" == this.fieldList[i].fieldType || "int" == this.fieldList[i].fieldType || "number" == this.fieldList[i].fieldType || "char" === this.fieldList[i].fieldType) {
                            this.inputShow = true;
                            this.dateTimeShow = false;
                            this.dateShow = false;
                        } else if ("Date" == this.fieldList[i].fieldType) {
                            this.dateShow = true;
                            this.dateTimeShow = false;
                            this.inputShow = false;
                        } else if ("Time" === this.fieldList[i].fieldType) {
                            this.dateTimeShow = true;
                            this.dateShow = false;
                            this.inputShow = false;
                        } else {
                            this.inputShow = true;
                            this.dateTimeShow = false;
                            this.dateShow = false;
                            //console.log("不存在的类型");
                        }
                        break;
                    }
                }
            },
            getData() {
                request({
                    method: "post",
                    url: "field",
                    data: {
                        tableId: this.configData.tableId,
                    },
                }).then((data) => {
                    this.fieldList = data.data;
                    this.field = data.data[0].fieldCode;
                    if ("String" === data.data[0].fieldType || "int" === data.data[0].fieldType || "number" === data.data[0].fieldType || "char" === data.data[0].fieldType) {
                        this.inputShow = true;
                    } else if ("Date" === data.data[0].fieldType) {
                        this.dateShow = true;
                    } else if ("Time" === data.data[0].fieldType) {
                        this.dateTimeShow = true;
                    } else {
                        this.inputShow = true;
                        //console.log("不存在的类型");
                    }
                });
            },
        },
    };
</script>